<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login</title>

    <!-- CSS -->
    <link rel="stylesheet" th:href="@{assets/material/material.blue_grey-blue.min.css}">
    <link rel="stylesheet" th:href="@{assets/material/material.icons.css}">
    <link rel="stylesheet" th:href="@{assets/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{assets/css/login.css}">

    <!-- Favicon and touch icons -->
    <link rel="shortcut icon" th:href="@{assets/ico/favicon.ico}">
</head>

<body>
    <div class="mdl-layout mdl-js-layout">
        <div class="login-container">
            <div class="login-form">
                <div class="login-form-title">
                    <label>Sign in</label>
                    <span>to continue to <span th:text="${domain.name}"></span></span>
                </div>
                <form role="form" th:action="@{login}" method="post">
                    <div class="login-form-content">
                        <div class="input-textfield">
                            <label for="username">Username</label>
                            <input type="text" id="username" name="username" autofocus="autofocus" required />
                        </div>
                        <div class="input-textfield">
                            <label for="password">Password</label>
                            <input type="password" id="password" name="password" required />
                        </div>
                        <div th:if="${param.error}" class="login-error-info">
                            <span>
                                <span class="error">login_failed</span>
                                 <small class="error_description">Wrong user or password</small>
                            </span>
                        </div>
                    </div>

                    <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                    <input type="hidden" th:name="client_id" th:value="${param.client_id}"/>
                    <div class="login-form-actions">
                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Sign in</button>
                    </div>
                    <div th:style="${allowForgotPassword and allowRegister} ? 'display:flex; flex-direction: row; margin-top: 10px; text-align: center;' : 'display:block; margin-top: 10px; text-align: center;'">
                        <div th:if="${allowForgotPassword}">
                            <a th:href="@{forgotPassword(client_id=${param.client_id})}">Forgot Password ?</a>
                        </div>
                        <span th:if="${allowForgotPassword and allowRegister}" style="display: flex; flex: 1;"></span>
                        <div th:if="${allowRegister}">
                            <a th:href="@{register(client_id=${param.client_id})}">Register</a>
                        </div>
                    </div>
                </form>

                <div th:if="${socialProviders and !socialProviders.empty}" class="social-login-buttons">
                    <div class="signup-or-separator">
                        <h6 class="text">or Sign in with</h6>
                        <hr>
                    </div>
                    <div class="mdl-social-button">
                        <a th:href="${authorizeUrls.get(socialProvider.getId())}"
                           th:class="'mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect btn-' + ${socialProvider.getType()}"
                           th:each="socialProvider : ${socialProviders}">
                            <i th:class="'fa fa-' + ${socialProvider.getType()}"></i> <span th:text="${socialProvider.getName()}"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--[if lt IE 10]>
    <script th:src="@{assets/js/placeholder.js}"></script>
    <![endif]-->
    <script th:src="@{assets/material/material.min.js}"></script>
    <script th:src="@{assets/js/jquery-3.5.1.min.js}"></script>
    <script>
        $(".mdl-textfield__input").focus(function (){
            if( !this.value ){
                $(this).prop('required', true);
                $(this).parent().addClass('is-invalid');
            }
        });
        $(".mdl-button[type='submit']").click(function (event){
            $(this).siblings(".mdl-textfield").addClass('is-invalid');
            $(this).siblings(".mdl-textfield").children(".mdl-textfield__input").prop('required', true);
        });
    </script>
</body>
</html>
